<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式测试页面</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/ilovefree-migration.css">
    <link rel="stylesheet" href="assets/css/enhanced-layout.css">
    <link rel="stylesheet" href="assets/css/fontawesome-icons.css">
    <style>
        body {
            padding: 20px;
            background: var(--gradient-bg);
        }
        .test-section {
            margin: 40px 0;
            padding: 20px;
            background: var(--bg-glass);
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .test-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--text-primary);
        }
        .test-item {
            margin: 10px 0;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-md);
        }
    </style>
</head>
<body>
    <h1>🧪 Pickfree样式迁移测试页面</h1>

    <div class="test-section">
        <h2 class="test-title">1. 分类标题样式测试</h2>
        <div class="category-header">
            <div class="category-title">
                <div class="category-icon">
                <h2 class="category-name">测试分类标题</h2>
            
            <div class="category-line">
        
    

    <div class="test-section">
        <h2 class="test-title">2. 标签系统测试</h2>
        <div class="tags-container">
            <span class="tag-label">筛选：</span>
            <button class="tag-btn active" data-tag-id="1" data-tag-filter="推荐">
                推荐
                <span class="tag-count">8</span>
            </button>
            <button class="tag-btn" data-tag-id="2" data-tag-filter="综合">
                综合
                <span class="tag-count">20</span>
            </button>
            <button class="tag-btn" data-tag-id="3" data-tag-filter="风景">
                风景
                <span class="tag-count">15</span>
            </button>
        
    

    <div class="test-section">
        <h2 class="test-title">3. 导航卡片测试</h2>
        <div class="nav-grid">
            <div class="nav-card">
                <a href="#">
                    
                        <img src="https://picsum.photos/seed/test1/200/120.jpg" alt="测试">
                        <h4>测试网站1</h4>
                        <p>这是一个测试描述，展示导航卡片的样式效果。</p>
                        <div class="nav-badge">测试
                    
                </a>
            
            <div class="nav-card">
                <a href="#">
                    
                        <img src="https://picsum.photos/seed/test2/200/120.jpg" alt="测试">
                        <h4>测试网站2</h4>
                        <p>另一个测试卡片，验证样式的一致性。</p>
                        <div class="nav-badge">样例
                    
                </a>
            
        
    

    <div class="test-section">
        <h2 class="test-title">4. 图标测试</h2>
        <div class="test-item">
            <i class="fas fa-images"></i> 图标
        
        <div class="test-item">
            <i class="fas fa-search"></i> 搜索
        
        <div class="test-item">
            <i class="fas fa-heart"></i> 爱心
        
    

    <script>
        console.log('🎨 样式测试页面已加载');
        console.log('CSS变量:', getComputedStyle(document.documentElement).getPropertyValue('--ilovefree-blue'));

        // 测试标签功能
        document.querySelectorAll('.tag-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.tag-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                console.log('点击了标签:', this.textContent.trim());
            });
        });
    </script>
</body>
</html>